<template>
    <div class="footer">
        <div class="mmv-layout footer__inner">
            <div class="footer__body">
                <div class="footer__item">
                    <div class="footer__itemtitle">社区地图</div>
                    <div class="footer__col2">
                        <p class="footer__itemtext">
                            <a href>酒馆</a>
                        </p>
                        <p class="footer__itemtext">
                            <a href>攻略</a>
                        </p>
                        <p class="footer__itemtext">
                            <a href>官方</a>
                        </p>
                        <p class="footer__itemtext">
                            <a href>同人图</a>
                        </p>
                    </div>
                </div>
                <div class="footer__item">
                    <div class="footer__itemtitle">了解我们</div>
                    <div class>
                        <p class="footer__itemtext">
                            <a href>关于我们</a>
                        </p>
                        <p class="footer__itemtext">
                            <a href>加入我们</a>
                        </p>
                        <p class="footer__itemtext">
                            <a href>原神官网</a>
                        </p>
                        <p class="footer__itemtext">
                            <a href>米哈游官网</a>
                        </p>
                    </div>
                </div>
                <div class="footer__item">
                    <div class="footer__itemtitle">相关信息</div>
                    <div class>
                        <p class="footer__itemtext">
                            <a href>隐私政策</a>
                        </p>
                        <p class="footer__itemtext">
                            <a href>米哈游社区用户服务协议</a>
                        </p>
                        <p class="footer__itemtext">
                            <a href>米哈游通行证用户服务协议</a>
                        </p>
                    </div>
                </div>
                <div class="footer__item">
                    <div class="footer__itemtitle">联系我们</div>
                    <div class>
                        <p class="footer__itemtext">
                            <span>地址：上海市徐汇区宜山路700号C4栋6层</span>
                        </p>
                        <p class="footer__itemtext">
                            <span>电话：86-021-34203305（每天10:00~20:00）</span>
                        </p>
                    </div>
                </div>
                <div class="footer__item">
                    <a href target="_blank">
                        <mmvQrcode vertical></mmvQrcode>
                    </a>
                </div>
            </div>
            <div class="footer__bottom">
                <div class="footer__copyright">
                    <p>
                        ©2012-2020 上海米哈游影铁科技有限公司版权所有｜
                        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402001113" target="_blank">沪公网安备31010402001113号</a>｜
                        <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">沪ICP备19018275号-4</a>
                    </p>
                    <p>沪网文〔2019〕3168-216｜增值电信业务经营许可证：沪B2-20190555</p>
                    <p>互联网违法不良信息举报电话：021-34203135（工作时间：每天10点-20点）｜互联网违法不良信息举报邮箱：tousu@mihoyo.com</p>
                    <p>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</p>
                </div>
                <div class="footer__licence">
                    <a href="https://v.yunaq.com/certificate?domain=www.mihoyo.com&amp;from=label&amp;code=90020" target="_blank">
                        <img
                            src=""
                        />
                    </a>
                    <a href="http://www.shjbzx.cn" target="_blank">
                        <img
                            src=""
                        />
                    </a>
                    <a href="http://www.12377.cn/" target="_blank">
                        <img
                            src=""
                        />
                    </a>
                    <a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/8955A9DDE1FF8B6CE053010A14ACA87F" target="_blank">
                        <img
                            src=""
                        />
                    </a>
                    <a>
                        <img
                            src=""
                        />
                    </a>
                    <a href="http://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&amp;serial=9031000020190314100540000004452331-SAIC_SHOW_310000-20200120150237277642&amp;signData=MEYCIQCjn9IhIKfUHjPlx9W6xrYPZ4GA73Blopwp0iEzSX0OHQIhAOZm3tnlWLrgVXMtvgp5OibauIgiAa+2d+MQ7qzMIm6t" target="_blank">
                        <img
                            src=""
                        />
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import mmvQrcode from "@/components/mmv-qrcode.vue";

export default {
    components: {
        mmvQrcode,
    },
};
</script>

<style lang="less">
.footer {
    width: 100%;
    text-align: center;
    background: #2d2f33;
    padding: 40px 0;
    &__bottom {
        text-align: left;
        padding-top: 40px;
        border-top: 1px solid rgba(235, 235, 235, 0.1);
        a {
            color: inherit;
        }
    }
    &__copyright {
        font-size: 14px;
        line-height: 24px;
        color: #666;
        text-align: center;
    }
    &__body {
        text-align: left;
        display: flex;
        padding-bottom: 40px;
    }
    &__item {
        width: 176px;
        flex-shrink: 0;
        &:nth-child(4) {
            width: auto;
            flex-grow: 1;
        }
        &:nth-child(5) {
            width: auto;
        }
        &title {
            margin-bottom: 30px;
            color: #999;
            font-weight: 600;
        }
        &text {
            line-height: 26px;
            white-space: nowrap;
            a,
            span {
                color: #999;
            }
        }
    }
    &__col2 {
        display: flex;
        flex-wrap: wrap;
        width: 120px;
        margin-right: -20px;
        .footer__itemtext {
            margin-right: 20px;
        }
    }
    &__licence {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        a + a {
            margin-left: 10px;
        }
    }
}
</style>